<template>
  <div>
    <h2>资讯列表</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "张三",
    };
  },

  /**
   * 当前组件对应的路由匹配上时触发，这时组件实例还未创建（它比created() 要先）
   *
   *    如果要获取this(组件实例对象)可以通过 next() 传递一个回调函数的方式，该回调函数接受到的参数是 this
   *
   *    PS： 只有当前这个守卫是特殊的，它的 next 可以传递函数
   */
  beforeRouteEnter(to, from, next) {
    console.log("=== beforeRouteEnter");
    next((vm) => {
      console.log("=== vm", vm);
    });
  },

  /**
   * 触发时机：是路由参数发生变化时触发
   * 应用场景：主要是处理详情页面跳转到详情页面时处理数据更新的问题
   */
  beforeRouteUpdate(to, from, next) {
    next();
  },

  /**
   * 触发时机：当离开该组件对应的路由时触发
   * 应用场景：二次确认退出的询问
   */
  beforeRouteLeave(to, from, next) {
    const flag = window.confirm("你确认要走吗？");
    if (flag) {
      // 放行
      next();
    } else {
      // 阻止
      next(false);
    }
  },

  created() {
    console.log("=== created", this.msg);
  },
};
</script>
